<style>
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_base, body .progress_inner #step-4:checked + input + div + div + div + div > .box_base, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base {
        top: 50%;
        left: 0px;
        opacity: 1;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item {
        top: -30px;
        left: 0px;
        opacity: 0;
    }

    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid {
        top: -20px;
        left: 0px;
        opacity: 0;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
        top: -10px;
        left: 0px;
        opacity: 1;
    }

    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item {
        top: 10px;
        left: 0px;
        opacity: 1;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid {
        top: -1px;
        left: 0px;
        opacity: 1;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon {
        top: 70%;
        left: 0px;
        opacity: 0;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow {
        top: 0px;
        left: 0px;
        opacity: 0;
    }

    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
        top: 50%;
        left: 0px;
        opacity: 1;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow {
        top: -10px;
        left: 0px;
        opacity: 1;
    }

    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_tag {
        top: 10px;
        left: 20px;
        opacity: 1;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div > .box_string {
        top: 10px;
        left: 20px;
        opacity: 1;
    }

    * {
        box-sizing: border-box;
    }

    #wx_box .progress_inner__step:before, body .progress_inner, body .progress_inner__status .box_base, body .progress_inner__status .box_item, body .progress_inner__status .box_ribbon, body .progress_inner__status .box_bow, body .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow__right, body .progress_inner__status .box_tag, body .progress_inner__status .box_string {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: auto;
    }

    #wx_box .progress_inner__bar, body .progress_inner__bar--set {
        height: 6px;
        left: 10%;
        background: -webkit-repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
        background: repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
        -webkit-transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
        transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
        border-radius: 6px;
        width: 0;
        position: relative;
        z-index: -1;
    }

    #wx_box .progress_inner__step:before {
        width: 30px;
        height: 30px;
        color: #70afd0;
        background: white;
        line-height: 25px;
        border: 3px solid #a6cde2;
        font-size: 12px;
        top: 3px;
        border-radius: 100%;
        -webkit-transition: all .4s;
        transition: all .4s;
        cursor: pointer;
        pointer-events: none;
    }

    #wx_box .progress_inner__step {
        width: 20%;
        font-size: 14px;
        padding: 0 10px;
        -webkit-transition: all .4s;
        transition: all .4s;
        float: left;
        text-align: center;
        position: relative;
    }
    #wx_box .progress_inner__step label {
        padding-top: 50px;
        top: -20px;
        display: block;
        position: relative;
        cursor: pointer;
    }
    #wx_box .progress_inner__step:hover {
        color: white;
    }
    #wx_box .progress_inner__step:hover:before {
        color: white;
        background: #1ea4ec;
    }

    #wx_box {
        font-family: "Nunito", sans-serif;
        background: #a6cde2;
        color: #2e6c8e;
        text-align: center;
        font-weight: 900;
        padding-top: 300px;
    }
    #wx_box .progress_inner {
        height: 200px;
        width: 700px;
    }
    #wx_box .progress_inner #step-5:checked + div {
        width: 80%;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
        opacity: 1;
        top: 0;
    }
    #wx_box .progress_inner #step-5:checked + div + div + div + div {
        right: 10%;
    }
    #wx_box .progress_inner #step-4:checked + input + div {
        width: 60%;
    }
    #wx_box .progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
        opacity: 1;
        top: 0;
    }
    #wx_box .progress_inner #step-4:checked + input + div + div + div + div {
        right: 30%;
    }
    #wx_box .progress_inner #step-3:checked + input + input + div {
        width: 40%;
    }
    #wx_box .progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
        opacity: 1;
        top: 0;
    }
    #wx_box .progress_inner #step-3:checked + input + input + div + div + div + div {
        right: 50%;
    }
    #wx_box .progress_inner #step-2:checked + input + input + input + div {
        width: 20%;
    }
    #wx_box .progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
        opacity: 1;
        top: 0;
    }
    #wx_box .progress_inner #step-2:checked + input + input + input + div + div + div + div {
        right: 70%;
    }
    #wx_box .progress_inner #step-1:checked + input + input + input + input + div {
        width: 0%;
    }
    #wx_box .progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
        opacity: 1;
        top: 0;
    }
    #wx_box .progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
        right: 90%;
    }
    #wx_box .progress_inner__step:nth-of-type(1):before {
        content: "1";
    }
    #wx_box .progress_inner__step:nth-of-type(2):before {
        content: "2";
    }
    #wx_box .progress_inner__step:nth-of-type(3):before {
        content: "3";
    }
    #wx_box .progress_inner__step:nth-of-type(4):before {
        content: "4";
    }
    #wx_box .progress_inner__step:nth-of-type(5):before {
        content: "5";
    }
    #wx_box .progress_inner__bar--set {
        width: 80%;
        top: -6px;
        background: #70afd0;
        position: relative;
        z-index: -2;
    }
    #wx_box .progress_inner__tabs .tab {
        opacity: 0;
        position: absolute;
        top: 40px;
        text-align: center;
        margin-top: 80px;
        box-shadow: 0px 2px 1px #80b7d5;
        padding: 30px;
        background: white;
        border-radius: 10px;
        -webkit-transition: all .2s;
        transition: all .2s;
    }
    #wx_box .progress_inner__tabs .tab h1 {
        margin: 0;
    }
    #wx_box .progress_inner__tabs .tab p {
        font-weight: 400;
        opacity: 0.8;
    }
    #wx_box .progress_inner__status {
        width: 40px;
        height: 40px;
        top: -80px;
        -webkit-transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
        transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        position: absolute;
    }
    #wx_box .progress_inner__status div {
        opacity: 0;
        -webkit-transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
        transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
        -webkit-transition-delay: 300ms;
        transition-delay: 300ms;
    }
    #wx_box .progress_inner__status div {
        position: absolute;
    }
    #wx_box .progress_inner__status .box_base {
        background: -webkit-repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
        background: repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
        width: 36px;
        height: 40px;
        z-index: 1;
        border-radius: 1px;
    }
    #wx_box .progress_inner__status .box_lid {
        width: 40px;
        height: 13.33333px;
        background: #775144;
        z-index: 2;
        border-radius: 1px;
        top: 0;
    }
    #wx_box .progress_inner__status .box_item {
        width: 20px;
        height: 20px;
        background: #be69d2;
        z-index: 0;
        border-radius: 4px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #wx_box .progress_inner__status .box_ribbon {
        width: 10px;
        height: 42px;
        background: #ee0f29;
        z-index: 4;
        border-radius: 1px;
    }
    #wx_box .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow__right {
        width: 6px;
        height: 10px;
        background: #be0c21;
        position: absolute;
        z-index: 3;
        opacity: 1;
        border-radius: 1px;
    }
    #wx_box .progress_inner__status .box_bow {
        top: -6px;
        z-index: 1;
        -webkit-transition-delay: 500ms;
        transition-delay: 500ms;
    }
    #wx_box .progress_inner__status .box_bow__left {
        left: 6px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #wx_box .progress_inner__status .box_bow__right {
        left: -4px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #wx_box .progress_inner__status .box_tag {
        width: 20px;
        height: 10px;
        background: #487ac7;
        z-index: 4;
        -webkit-transform: rotate(-10deg) translateX(-40px) translateY(0px);
        transform: rotate(-10deg) translateX(-40px) translateY(0px);
        border-radius: 2px;
        -webkit-transition-delay: 500ms;
        transition-delay: 500ms;
    }
    #wx_box .progress_inner__status .box_string {
        width: 17px;
        height: 2px;
        background: #343434;
        z-index: 4;
        -webkit-transform: rotate(-39deg) translateX(-22px) translateY(-12px);
        transform: rotate(-39deg) translateX(-22px) translateY(-12px);
    }
    #wx_box .progress_inner input[type="radio"] {
        display: none;
    }
</style>
<div id="wx_box">
    <div class="wx_progress">
        <div class="progress_inner">
            <div class="progress_inner__step">
                <label for="step-1">第一步</label>
            </div>
            <div class="progress_inner__step">
                <label for="step-2">第二步</label>
            </div>
            <div class="progress_inner__step">
                <label for="step-3">第三步</label>
            </div>
            <div class="progress_inner__step">
                <label for="step-4">第四步</label>
            </div>
            <div class="progress_inner__step">
                <label for="step-5">第五步</label>
            </div>
            <input checked="checked" id="step-1" name="step" type="radio">
            <input id="step-2" name="step" type="radio">
            <input id="step-3" name="step" type="radio">
            <input id="step-4" name="step" type="radio">
            <input id="step-5" name="step" type="radio">
            <div class="progress_inner__bar"></div>
            <div class="progress_inner__bar--set"></div>
            <div class="progress_inner__tabs">
                <div class="tab tab-0">
                    <h1> 第一步</h1>
                    <p>
                        云想衣裳花想容，春风拂槛露华浓。
                        若非群玉山头见，会向瑶台月下逢。
                    </p>
                </div>
                <div class="tab tab-1">
                    <h1>第二步</h1>
                    <p>
                        君问归期未有期，巴山夜雨涨秋池。
                        何当共剪西窗烛，却话巴山夜雨时。
                    </p>
                </div>
                <div class="tab tab-2">
                    <h1>第三步</h1>
                    <p>
                        银烛秋光冷画屏，轻罗小扇扑流萤。
                        天阶夜色凉如水，卧看牵牛织女星。
                    </p>
                </div>
                <div class="tab tab-3">
                    <h1>第四步</h1>
                    <p>
                        谁谓伤心画不成，画人心逐世人情。
                        君看六幅南朝事，老木寒云满故城。
                    </p>
                </div>
                <div class="tab tab-4">
                    <h1>第五步</h1>
                    <p>
                        春城无处不飞花，寒食东风御柳斜。
                        日暮汉宫传蜡烛，轻烟散入五侯家。
                    </p>
                </div>
            </div>
            <div class="progress_inner__status">
                <div class="box_base"></div>
                <div class="box_lid"></div>
                <div class="box_ribbon"></div>
                <div class="box_bow">
                    <div class="box_bow__left"></div>
                    <div class="box_bow__right"></div>
                </div>
                <div class="box_item"></div>
                <div class="box_tag"></div>
                <div class="box_string"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var wx_box = document.getElementById('wx_box');
    var winH = window.innerHeight;
    wx_box.style.height = winH+'px';
</script>